<!--
1. 在 Vue 中尽量不要用JQuery, 减少操作dom
2. Table 的使用
    1. table 表
       thead
       tbody
       tr 行
       th 列头
3. @click后面的函数如果加小括号和不加小括号没有区别，加了小括号可以传递参数
4. 如何根据 id 找到 要删除这一项的索引，找到索引后直接调用数组的splice方法。
5. 在 数组的 some 方法中，如果return true, 就会立即终止这个数组的后续循环
6. 数组的splice(i,count) 作用使删除数组中从第i个开始的count个元素，i从0开始
7. 用 数组的 findIndex 方法可以帮助我们找到下标
8. String 的pad方法，可以补0或者别的符号
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <style>
        table,thead,tr,th,tbody,td{
            border: black solid 1px;
            background-color: lightgoldenrodyellow;
        }
    </style>
</head>
<body>
    <div id="app">


        <div>
            <h3>添加</h3>
            <div style="display: inline-block">
                Id:<input type="text" v-model="id">
                Name:<input type="text" v-model="name">
                <input type="button" value="提交" @click="add">
                搜索名称关键字：<input type="text" v-model="keyword">
                <input type="button" @click="search" value="搜索">
            </div>
        </div>


        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Time</th>
                    <th>delete</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.time}}</td>
                    <td><a href="" @click.prevent="del(item.id)">删除</a></td>
                </tr>
            </tbody>

        </table>
    </div>
    <script>
        var date=new Date();
        var year=date.getFullYear();
        var month=(date.getMonth()+1).toString().padStart(2,'0');
        var day=date.getDate();
        var today=year+":"+month+":"+day;
        var vm=new Vue({
            el: "#app",
            data:{
                id:'',
                name:'',
                keyword:'',
                list:[
                    {id:1,name:'zmj',time:today},
                    {id:2,name:'fas',time:today},
                ],

            },
            methods:{

                add(){
                    this.list.push({id:this.id,name:this.name,time:today});
                    this.id='';
                    this.name='';
                },

                del(id){
                    // 方法一
                    // this.list.some((item,i)=>{
                    //     if(item.id===id){
                    //         this.list.splice(i,1);
                    //         return true;
                    //     }
                    // })


                    // 方法二
                    var index=this.list.findIndex(item =>{
                            if(item.id===id){
                                return true;
                            }
                        }
                    );
                    this.list.splice(index,1);
                },

                search(){
                    var newList=[];
                    this.list.forEach(item=>{
                        if(item.name.indexOf(this.keyword)!==-1){
                            newList.push(item);
                        }
                    });
                    this.list=newList;
                }
            }
        })
    </script>
</body>
</html>